<template>
	<view class="login-view" style="" :class="{ showFotget: !isLoginPage }">
		<view class="t-login">
			<form class="cl">
				<view class="t-a">
					<text class="txt">身份证号</text>
					<input type="number" name="id" placeholder="请输入您的身份证号" maxlength="18" v-model="resetData.id" />
				</view>
				<view class="t-a">
					<text class="txt">手机号</text>
					<input type="number" name="phone" maxlength="11" placeholder="请输入您的手机号" v-model="resetData.phone" />
				</view>
				<u-button @click="handleReset" type="success" :loading="confirmBtnLoading" ripple :hair-line="false">确定</u-button>
				<text @click="$emit('update:isLoginPage', true)" class="back">&lt;返回</text>
			</form>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Forget',
	props: ['isLoginPage'],
	data() {
		return {
			resetData: {
				id: '', // 身份证号
				phone: '' // 手机号
			},
			confirmBtnLoading: false // 是否禁用确认按钮
		}
	},
	methods: {
		/* 确认按钮的回调 */
		async handleReset() {
			// 定义验证身份证号的正则
			const idReg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
			const { id, phone } = this.resetData

			/* 填写信息校验 */
			if (!id) {
				this.$showToast.none('请输入您的身份证号')
			} else if (!idReg.test(id)) {
				this.$showToast.none('请输入正确身份证号')
			} else if (!phone) {
				this.$showToast.none('请输入您的手机号')
			} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(phone)) {
				this.$showToast.none('请输入正确手机号')
			} else {
				/* 检验通过 */
				// 请求重置密码
				try {
					this.confirmBtnLoading = true
					let result = await this.$axios.post('/reSetPassword',this.resetData)
					// 取消确认按钮的加载效果
					this.confirmBtnLoading = false
					// 请求成功后弹框提示用户密码
					this.$emit('handleChangeModal', true, result.data)
				} catch (error) {
					// 重置密码失败，取消确认按钮的加载效果
					this.confirmBtnLoading = false
				}
			}
		}
	}
}
</script>

<style scoped>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: absolute;
	left: 100%;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
	transition: all 1s;
	transform: scale(0.5);
	opacity: 0.3;
}

.login-view.showFotget {
	left: 0;
	transform: scale(1);
	opacity: 1;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	/* background: #2796f2; */
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
.back{
	display: block;
	text-align: center;
	margin: 20px auto;
	color: #666;
}
</style>
